<template>
  <div class="table-page-box">
    <SearchTable
      ref="listPageRef"
      :searchFormConfig="searchFormConfig"
      :tableComponentConfig="tableComponentConfig"
    >
      <template #action="{ row }">
        <el-button type="text" @click="handleEdit(row)"> 编辑 </el-button>
        <el-button type="text" @click="handlePreview(row)"> 详情 </el-button>
        <el-button type="text" @click="handleDelete(row)"> 删除 </el-button>
      </template>
    </SearchTable>
    <RecordInfo
      :mode="mode"
      :currentInfo="currentInfo"
      v-model="infoModalVisible"
      @refresh="refreshTable"
    />
  </div>
</template>

<script>
import RecordInfo from "./components/RecordInfoModal.vue";
import { testApi, testDel } from "@/api";

export default {
  name: "SearchListPage",
  components: {
    RecordInfo,
  },
  data() {
    return {
      mode: "add",
      infoModalVisible: false,
      currentInfo: {},
    };
  },
  computed: {
    // 查询表单配置
    searchFormConfig() {
      return {
        fieldList: `%queryList%`,
      };
    },
    // 表格配置
    tableComponentConfig() {
      return {
        // 数据请求接口
        loadData(params) {
          // const { createTime, ...rest } = params;
          // return testApi({
          //   startCreateTime: createTime?.[0] ?? "",
          //   endCreateTime: createTime?.[1] ?? "",
          //   ...rest,
          // });
          return testApi(params);
        },
        // 删除接口
        delData: testDel,
        columns: `%columns%`,
      };
    },
  },
  methods: {
    // 添加
    handleAdd() {
      this.mode = "add";
      this.currentInfo = {};
      this.infoModalVisible = true;
    },
    // 编辑
    handleEdit(record) {
      this.mode = "edit";
      this.currentInfo = record;
      this.infoModalVisible = true;
    },
    // 详情
    handlePreview(record) {
      this.mode = "preview";
      this.currentInfo = record;
      this.infoModalVisible = true;
    },
    // 删除
    handleDelete(record) {
      this.$refs.listPageRef.deleteRecord(record.id);
    },
    // 刷新页面
    refreshTable() {
      // 重置页面到1
      // this.$refs.listPageRef.refreshTable(true);
      this.$refs.listPageRef.refreshTable();
    },
  },
};
</script>
